<template>
  <div>
    <el-dialog
      title="参数配置"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <div>
        <div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div class="dasljdkas">
              <div
                @click="getGroupLis(item.index)"
                :index="item.index"
                v-for="(item, index) in menuData"
                :key="index"
                class="yl"
                :class="getGroupLisFlag == item.index ? 'sdo' : 'bso'"
              >
                {{ item.name }}
              </div>
            </div>
            <div>
                <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:manage:add']"
          >新增</el-button
        > 
            </div>
          </div>
          <el-checkbox-group
            v-model="defDatacheck"
            @change="handleCheckedCitiesChange"
          >
            <template>
              <el-table
                :data="getGroupLisFlag == 1 ? defData1 : defData2"
                height="300"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column label="图标" align="center">
                  <template slot-scope="scope">
                    <img :src="scope.row.img" alt="" width="50px" />
                  </template>
                </el-table-column>
                <el-table-column prop="paraNo1" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="paraName" label="名称" align="center">
                </el-table-column>

                <!-- <el-table-column label="报警级别">
                <template slot-scope="scope">
                  <el-dropdown @command="warnGradeFun">
                    <span class="el-dropdown-link">
                      {{ warnGradeData[scope.row.warnGrade].name
                      }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        :command="{
                          item: item,
                          index: scope.$index,
                        }"
                        v-for="(item, index) in warnGradeData"
                        :key="index"
                      >
                        {{ item.name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column> -->
                <el-table-column
                  prop="warnType"
                  label="告警电平"
                  v-if="getGroupLisFlag == 1"
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  v-if="getGroupLisFlag == 2"
                  align="center"
                  prop="sign"
                  label="单位"
                >
                </el-table-column>
                <el-table-column
                  v-if="getGroupLisFlag == 2"
                  align="center"
                  prop="paraIniValue"
                  label="提醒下限"
                >
                </el-table-column>
                <el-table-column
                  v-if="getGroupLisFlag == 2"
                  align="center"
                  prop="paraMinValue"
                  label="下限"
                >
                </el-table-column>
                <el-table-column
                  v-if="getGroupLisFlag == 2"
                  align="center"
                  prop="paraMaxValue"
                  label="上限"
                >
                </el-table-column>

                <el-table-column
                  label="备注"
                  width="180"
                  prop="note"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                  width="240"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-view"
                      @click="handleAdd(scope.row, true)"
                      v-hasPermi="['system:manage:edit']"
                      >查看</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleAdd(scope.row, false)"
                      v-hasPermi="['system:manage:edit']"
                      >修改</el-button
                    >
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      v-hasPermi="['system:manage:remove']"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-checkbox-group>
        </div>
        <!-- <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="95px"
            :disabled="flag"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="类型名称" prop="typeName">
                  <el-input
                    v-model="form.typeName"
                    placeholder="请输入类型名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型分类" prop="groupId">
                  <el-cascader
                    :options="devices"
                    v-model="form.groupId"
                    :props="cascaderProps"
                    placeholder="请选择类型分类"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="producer">
                  <el-input
                    v-model="form.producer"
                    placeholder="请输入厂家名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="厂家型号" prop="model">
                  <el-input
                    v-model="form.model"
                    placeholder="请输入厂家型号"
                  />
                </el-form-item>
              </el-col>
            </el-row>
  
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="note">
                  <el-input
                    v-model="form.note"
                    type="textarea"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formpost" v-if="!flag"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <configurationform ref="configurationform"  @gx="gx"></configurationform>
  </div>
</template>
  <script>
import {
  devevGroup,
  devTypeAdd,
  devTypeUpdateType,
  ListDef,
  deleteDef 
} from "@/api/system/imei";
import { getToken } from "@/utils/auth";
import configurationform from './configurationform'
export default {
    components:{
        configurationform
    },
  data() {
    return {
      dialogVisible: false,
      getGroupLisFlag: 1,
      menuData: [
        {
          name: "遥信量",
          index: "1",
        },
        {
          name: "遥测量",
          index: "2",
        },
      ],
      defData1: [],
      defData2: [],
      defDatacheck: [],
      form: {
        typeID: "",
      },
      fileList: [],
      devices: [],
      cascaderProps: {
        value: "groupId",
        label: "groupName",
      },
      upload: {
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 图片上传的方法地址:
        url: process.env.VUE_APP_BASE_API + "/system/manage/upload",
      },
      rules: {
        typeName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        groupId: [
          { required: true, message: "设备类型不能为空", trigger: "blur" },
        ],
      },
      flag: false,
      tpid: "",
    };
  },
  methods: {
    handleClose(done) {
        done();
    },
    gx(){
        this.listdatafun()
    },
    init(id) {
      // this.form = {}
      this.tpid = id;
      // if (data.typeID) {
      //   this.form = data;

      //   this.flag = flag;
      //   this.fileList = [{ url:this.form.img}]
      //   console.log('sss',this.devices);
      // }
      this.dialogVisible = true;
      // devevGroup().then((res) => {
      //   this.devices = res.rows;
      //   console.log('laizd',this.devices);
      // });
      this.listdatafun();
    },
    listdatafun() {
      ListDef({ TypeID: this.tpid, ParaType: 1 }).then((res) => {
        this.defData1 = res.rows;
        this.loading = false;
        ListDef({ TypeID: this.tpid, ParaType: 2 }).then((res) => {
          this.defData2 = res.rows;
          this.loading = false;
        });
      });
    },
    formpost() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (typeof this.form.groupId == "object") {
            this.form.groupId = this.form.groupId[0];
          }
          if (this.form.typeID) {
            devTypeUpdateType(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "更新成功",
                  type: "success",
                });
                this.dialogVisible = false;
                this.$emit("shuax");
              }
            });
          } else {
            devTypeAdd(this.form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
                this.dialogVisible = false;
                this.$emit("shuax");
              }
            });
          }
        }
      });
    },
    handleSelectionChange() {},
    handleCheckedCitiesChange() {},
    handlebefore(file) {
      console.log(file);
    },

    uploadChange(file, fileList) {
      console.log(123, fileList);
      this.form.img = fileList[0].response;
    },
    getGroupLis(index) {
      this.getGroupLisFlag = index;
    },
    handleAdd(data, flag) {
        
      this.$refs.configurationform.init(data, flag,this.tpid,this.getGroupLisFlag);
    },
    handleDelete(row) {
      // const ids = row.id || this.ids;
      this.$confirm("是否删除该数据")
        .then((_) => {
         
          deleteDef({id:row.id}).then((res) => {
            this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.listdatafun()
          });
          
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.dasljdkas {
  display: flex;
}
.yl {
  padding: 20px;
}
.sdo {
  border-bottom: 2px solid #1890ff;
}
</style>